<template>
  <page-header-wrapper :content="$t('cluster.about')">
    <!-- drawer for edit -->
    <a-drawer width="500" :title="$t('cluster.form.configure.title')" :visible="editFormVisible" @close="closeEditFrom">
      <EditCluster :origin="editFormOrigin" @update:close="closeEditFrom" />
    </a-drawer>

    <!-- cluster list -->
    <div class="grid">
      <a-list rowKey="id" :grid="{gutter: 24, lg: 2, md: 2, sm: 1, xs: 1}" :dataSource="clusterList" :loading="clusterLoading">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card :hoverable="true">
            <a-card-meta>
              <a-avatar slot="avatar" :src="item.plugin_icon" size="large"/>
              <h3 slot="title">{{ item.title }}</h3>
              <div slot="description" class="grid-info">
                <ul>
                  <li>
                    {{ $t('cluster.plugin') }}:
                    <span class="status-highlight">{{ item.plugin }}</span>
                  </li>
                  <li>
                    {{ $t('cluster.status') }}:
                    <span v-if="item.status === 0" class="status-disabled">
                      <a-icon type="warning" />
                      {{ $t('cluster.status.disabled') }}
                    </span>
                    <span v-if="item.status === 1" class="status-enabled">
                      <a-icon type="check" />
                      {{ $t('cluster.status.enabled') }}
                    </span>
                  </li>
                  <li>
                    {{ $t('cluster.store') }}:
                    <span v-if="item.store === 0" class="status-disabled">
                      <a-icon type="warning" />
                      {{ $t('cluster.store.disabled') }}
                    </span>
                    <span v-if="item.store === 1" class="status-enabled">
                      <a-icon type="check" />
                      {{ $t('cluster.store.enabled') }}
                    </span>
                  </li>
                  <li>
                    {{ $t('updated.at') }}:
                    <span>{{ item.updated_at }}</span>
                  </li>
                </ul>
                <p>{{ item.remark }}</p>
              </div>
            </a-card-meta>
            <template slot="actions">
              <a v-if="item.status === 0" @click="() => openConfirmEnable(item)">
                <a-icon type="check"/>
                {{ $t('action.enable') }}
              </a>
              <a v-if="item.status === 1" @click="() => openConfirmDisable(item)">
                <a-icon type="warning"/>
                {{ $t('action.disable') }}
              </a>
              <a @click="openEditFrom(item)">
                <a-icon type="setting"/>
                {{ $t('action.configure') }}
              </a>
            </template>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </page-header-wrapper>
</template>

<script>
import EditCluster from '@/views/v1/settings/clusters/Edit.vue'
import { disableCluster, enableCluster, getClusterList } from '@/api/v1'
import { Modal } from 'ant-design-vue'

export default {
  components: { EditCluster },
  created () { this.loadCluster() },
  data () {
    return {
      editFormOrigin: {},
      editFormVisible: false,
      clusterConditions: { topic: '', tag: '', status: '', handler: '', page: 1, size: 25 },
      clusterColumns: [
        { key: 'plugin', title: this.$t('cluster.plugin'), dataIndex: 'plugin' },
        { key: 'title', title: this.$t('cluster.title'), dataIndex: 'title' },
        { key: 'status', title: this.$t('cluster.status'), scopedSlots: { customRender: 'status' } },
        { key: 'store', title: this.$t('cluster.store'), scopedSlots: { customRender: 'store' } },
        { key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      clusterList: [],
      clusterLoading: false,
      modal: null,
      modalOption: {
        cancelText: this.$t('action.close'),
        centered: true,
        destroyOnClose: true,
        okText: this.$t('action.ok'),
        okType: 'warning',
        parentContext: this
      }
    }
  },
  methods: {
    closeEditFrom () { this.editFormVisible = false },
    createModal (opt) {
      if (this.modal !== null) {
        this.modal.destroy()
      }
      this.modal = Modal.confirm(opt)
    },
    openConfirmDisable (item) {
      const opt = this.modalOption
      opt.title = this.$t('cluster.confirm.disable')
      opt.content = this.$t('cluster.confirm.disable.message', { title: item.title })
      opt.onOk = () => { this.sendDisable(item) }
      this.createModal(opt)
    },
    openConfirmEnable (item) {
      const opt = this.modalOption
      opt.title = this.$t('cluster.confirm.enable')
      opt.content = this.$t('cluster.confirm.enable.message', { title: item.title })
      opt.onOk = () => { this.sendEnable(item) }
      this.createModal(opt)
    },
    openEditFrom (item) { this.editFormOrigin = item; this.editFormVisible = true },
    async loadCluster () {
      this.clusterLoading = true
      getClusterList({}, (res) => {
        this.clusterList = res.data
        }, () => {}, () => {
          this.clusterLoading = false
        }
      )
    },
    async sendDisable (item) {
      this.clusterLoading = true
      disableCluster({ id: item.id }, () => {
        this.$message.info(this.$t('cluster.confirm.disable.succeed', { title: item.title }))
        this.clusterLoading = false
        this.loadCluster()
      }, (err) => {
        this.clusterLoading = false
        this.$message.error(err)
      })
    },
    async sendEnable (item) {
      this.clusterLoading = true
      enableCluster({ id: item.id }, () => {
        this.$message.info(this.$t('cluster.confirm.enable.succeed', { title: item.title }))
        this.clusterLoading = false
        this.loadCluster()
      }, (err) => {
        this.clusterLoading = false
        this.$message.error('' + err)
      })
    }
  }
}
</script>
